<template>
	<view class="book-lay">
		<bookNavbar></bookNavbar>
		<uni-search-bar cancelButton="none" v-model="keywords" placeholder="搜索"></uni-search-bar>
		<view class="book-bar">
				<u-cell-group :border="false">
					<u-cell
					title="新的好友"
					:isLink="true"
					:border="false"
					url="/pages/book/addNewFriend/addNewFriend"
					>
					<u-icon
					style="background-color: #ff9e01;border-radius: 10rpx; margin-right: 10rpx;"
					slot="icon"
					size="30" 
					color="white" 
					name="plus-people-fill"></u-icon>
					</u-cell>
					
					<u-cell
					title="我的好友"
					:isLink="true"
					:border="false"
					
					>
					<u-icon
					 style="background-color: #0055ff;border-radius: 10rpx; margin-right: 10rpx;"
					slot="icon"
					size="30" 
					color="white" 
					name="account-fill"></u-icon>
					</u-cell>
					
					<u-cell
					title="同事动态"
					:isLink="true"
					:border="false"
					@click="navTo('/pages/user/dynamic/colleagues',1)"
					>
					<u-icon 
					style="background-color: #00d500; border-radius: 10rpx; margin-right: 10rpx;"
					slot="icon"
					size="30" 
					color="white" 
					name="moments"></u-icon>
					</u-cell>
					
					<u-cell
					title="服务窗"
					:isLink="true"
					:border="false"
					>
					<u-icon 
					style="background-color: #0055ff; border-radius: 10rpx; margin-right: 10rpx;"
					slot="icon"
					size="30" 
					color="white" 
					name="server-fill"></u-icon>
					</u-cell>
				</u-cell-group>
				
		</view>
		<view class="contacts-text">
			常用联系人
		</view>
		<view class="contacts" @click="navTo('/pages/chat/chat',user.id)" v-for="user in userList" :key="user.id">
			<u-avatar
			size="45"
			:text="getAvatar(user)"
			shape="square" 
			bg-color="#0080FF"
			font-size='15'
			:src="user.avaUrl"
			>
			</u-avatar>
			<view class="user-name">
				{{user.userName}}
			</view>
		</view>
	</view>
</template>


<script>
import { data } from "../../uni_modules/uview-ui/libs/mixin/mixin";
	export default {
			data() {
				return {
					keywords:'',
					userList:[],
				}
			},
			onLoad() {
				let _this = this;
				let token = uni.getStorageSync('token')
				uni.request({
					url:"http://localhost:8090/nailCampus/friend/getFriendList",
					header:{
						"token":token
					},
					success(res) {
						_this.userList = res.data.data;
					}
				});
			},
			mounted() {
			},
			methods:{
				navTo(url,id){
					uni.navigateTo({
						url:url+'?id='+id
					})
				},
			getAvatar(user){
				let text = '';
				if(user.avaUrl == null|| user.avaUrl.length == 0){
					text = user.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
				
			}
		}
</script>
<style lang="less" scoped>
	.book-lay{
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 200rpx;
		.contacts-text{
			margin-top: 20rpx;
			color: #bebebe;
			font-size: 20rpx;
		}
		.contacts{
			// border: 1rpx solid red;
			margin-top: 30rpx;
			margin-left: 20rpx;
			height: 90rpx;
			::v-deep.u-avatar{
				float: left;
			}
			.user-name{
				line-height: 90rpx;
				font-size: 30rpx;
				font-weight: 550;
				margin-left: 100rpx;
			}
		}
	}
	.book-bar{
		border-bottom: 1rpx solid #d4d4d4;
		height: 470rpx;
		::v-deep.u-cell{
			font-weight: 600;
		}
		::v-deep.u-icon{
			padding-left: 15rpx; 
			width: 80rpx; 
			height: 80rpx; 
			
		}
	}

</style>